<template>
  <div>
<!--    <div class="container">-->
<!--      <svg width="500" height="200" viewBox="0 0 500 200">-->
<!--        &lt;!&ndash;-->
<!--         [2,-1,50] => 2*_x+(-1)*_y+50=x-->
<!--         [1, 2, 0] => 1*_x+2*_y+0=y-->

<!--         顶点坐标-->
<!--         [0,0]     => [50,0]-->
<!--         [100,0]   => [250,100]-->
<!--         [100,50]  => [200,200]-->
<!--         [0,50]    => [0,100]-->

<!--         transform="matrix(2 1 -1 2 50 0)"-->
<!--       &ndash;&gt;-->
<!--        <rect-->
<!--            class="rect"-->
<!--            x="10"-->
<!--            y="10"-->
<!--            width="100"-->
<!--            height="50"-->
<!--            fill="none"-->
<!--            stroke="blue"-->
<!--            stroke-width="5"-->
<!--        />-->
<!--      </svg>-->
<!--    </div>-->
<!--    <div class="container">-->
<!--      <svg width="400" height="400" viewBox="0 0 440 440">-->
<!--        <circle-->
<!--            r="200"-->
<!--            cx="220"-->
<!--            cy="220"-->
<!--            stroke-width="20"-->
<!--            stroke="#d1d3d7"-->
<!--            fill="none"-->
<!--        />-->
<!--        <circle-->
<!--            class="circle"-->
<!--            r="200"-->
<!--            cx="220"-->
<!--            cy="220"-->
<!--            stroke-width="20"-->
<!--            stroke="#00a5e0"-->
<!--            fill="none"-->
<!--            transform="matrix(0 -1 1 0 0 440)"-->
<!--        />-->
<!--      </svg>-->
<!--    </div>-->
<!--    <div class="container">-->
<!--      <svg width="200" height="200" viewBox="0 0 200 200">-->
<!--        <rect x="0" y="0" width="200" height="200" fill="none" stroke="#d1d3d7" stroke-width="8"></rect>-->
<!--        <rect x="0" y="0" width="200" height="200" fill="none" stroke="blue" stroke-width="8" class="rect-process"-->
<!--              transform="matrix(0,1,-1,0,200,0)"></rect>-->
<!--      </svg>-->
<!--    </div>-->
<!--    <div class="container">-->
<!--      <svg viewBox="0 0 1024 1024" width="200" height="200">-->
<!--        <path class="logo"-->
<!--              d="M836.992 833.092c-2.963-8.818-5.536-16.463-5.536-31.334 0-11.195 3.232-13.549 11.708-19.688 5.113-3.705 12.445-9.029 22.549-19.5 28.636-29.645 45.994-49.755 56.094-72.748 10.072-22.94 13.084-49.157 13.084-91.108 0-47.781-29.726-95.191-74.967-130.644-45.22-35.419-105.861-58.844-167.939-58.844-65.433 0-118.502 20.123-157.831 51.443-33.288 26.519-56.788 61.087-69.638 98.267-12.844 37.164-15.077 76.929-5.881 113.873 9.648 38.764 31.927 74.482 67.743 100.862 31.786 23.42 69.3 40.893 109.139 49.869 37.347 8.423 76.778 9.384 115.485 0.794 48.493-10.756 53.097-6.294 62.281 2.658 4.596 4.475 10.544 10.268 26.669 15.482-0.981-3.492-1.991-6.508-2.96-9.382z m-637.02-172.174c-2.583 7.112-5.18 14.244-6.497 24.561 11.114-3.436 20.963-9.233 30.715-14.969 19.239-11.33 38.19-22.477 66.625-16.781 22.712 4.556 39.454 7.719 57.193 9.734 16.541 1.881 34.031 2.768 58.17 2.874-6.163-15.779-8.378-34.656-7.948-53.867 0.574-25.79 5.923-52.332 12.801-72.813 18.38-54.622 41.42-75.901 76.153-107.972l1.917-1.773c4.285-3.951 6.784-6.238 9.451-8.392l-0.004-0.006c2.557-2.074 5.341-4.065 10.236-7.489 24.122-16.864 49.403-29.932 77.065-38.776 26.51-8.476 55.21-13.088 87.143-13.463-4.534-18.525-11.121-35.914-19.442-52.08-30.634-59.564-84.974-102.816-148.25-127.434-63.414-24.66-135.779-30.628-202.337-15.58-24.678 5.577-48.553 14.055-70.854 25.525-47.982 24.68-84.285 56.546-108.927 92.254-23.632 34.237-36.58 72.062-38.872 110.5-2.288 38.448 6.062 77.581 25.01 114.421 20.239 39.358 52.595 76.143 96.96 106.761l1.482 1.025V619c0.002 20.456-3.894 31.179-7.79 41.918zM71.684 543.003c-23.233-42.377-38.019-91.377-38.019-137.208 0-37.262 11.725-77.678 30.396-114.663 19.749-39.12 47.337-74.513 77.08-98.369 68.154-54.687 146.687-82.913 226.089-85.362 80.43-2.487 161.75 21.46 234.078 71.083 31.082 21.308 54.918 44.518 73.767 70.967 18.815 26.417 32.641 56.055 43.71 90.275 6.818 21.019 8.939 21.249 21.616 22.592 4.625 0.49 10.483 1.117 18.104 2.629 25.884 5.144 51.909 13.807 76.083 25.558 23.139 11.246 44.626 25.35 62.721 41.952 12.706 11.659 24.552 23.214 35.279 35.871 10.764 12.711 20.326 26.457 28.366 42.393 20.433 40.508 30.012 77.904 28.57 115.023-1.441 37.111-13.915 73.831-37.543 112.957-7.759 12.84-20.733 28.925-34.685 43.82-13.413 14.334-27.788 27.634-39.342 35.95 4.43 19.004 9.323 32.368 13.202 42.957 7.82 21.377 11.762 32.136 0.749 53.599l-1.029 2.007-2.183-0.188c-18.389-1.579-29.877-8.984-42.545-17.139l-4.193-2.687v0.008a367.028 367.028 0 0 0-18.873-11.207c-5.977-3.322-12.335-6.673-19.297-10.332-17.021-8.948-17.521-8.818-31.867-4.849-3.139 0.867-6.904 1.913-12.16 3.22-31.957 7.967-44.279 7.841-69.983 7.568-4.633-0.049-9.783-0.103-17.497-0.103-51.612 0-110.596-22.585-158.919-55.796-46.877-32.214-83.886-74.556-94.68-116.157-20.878 4.629-42.163 5.671-63.2 4.519-22.016-1.196-43.779-4.819-64.525-9.229-32.779-6.978-58.976 10.133-83.982 26.47-16.251 10.616-32.048 20.933-49.212 24.657-14.853 3.225-21.944-1.828-24.128-11.907-3.273-15.063 6.589-42.143 15.858-67.591 4.669-12.815 9.196-25.235 11.718-35.222-34.147-19.431-66.147-55.435-89.524-98.058v-0.008z m373.12-191.865c-7.582-8.671-12.687-20.77-12.687-35.727 0-8.626 6.31-17.854 15.071-24.878 8.761-7.018 20.123-11.999 30.027-11.999 23.384 0 37.988 11.018 44.371 25.248 2.536 5.64 3.758 11.81 3.709 18v0.013a45.511 45.511 0 0 1-3.904 18.083c-6.651 14.975-21.639 26.81-44.176 26.81-11.423 0-23.604-5.464-32.411-15.55z m-214.412 0.007c-7.576-8.678-12.687-20.771-12.687-35.733 0-8.626 6.31-17.854 15.077-24.878 8.754-7.018 20.117-11.999 30.027-11.999 23.099 0 37.486 10.987 43.779 25.205 2.498 5.646 3.703 11.818 3.654 17.994a46.112 46.112 0 0 1-3.849 18.073c-6.569 15.003-21.381 26.881-43.584 26.881-11.423 0-23.609-5.458-32.417-15.543zM636.29 601.132c-5.252 11.199-16.943 19.781-35.409 19.781-18.768 0-30.04-8.59-34.934-19.81l2.866-1.331-2.866 1.319c-2.015-4.625-2.923-9.705-2.809-14.799 0.114-5.063 1.258-10.165 3.302-14.83 5.406-12.318 17.184-22.028 33.797-21.755 18.441 0.293 30.638 9.933 36.053 21.999a36.387 36.387 0 0 1 3.184 14.786c0.011 5.041-1.043 10.072-3.184 14.64z m117.321 17.257c-11.773-4.742-20.697-15.774-20.697-34.358 0-16.532 8.822-26.209 20.514-30.337 4.702-1.653 9.893-2.386 15.14-2.275a51.279 51.279 0 0 1 15.385 2.719c13.878 4.719 25.154 15.336 25.154 29.894 0 16.654-11.041 28.59-24.703 33.927-4.921 1.918-10.234 2.988-15.485 3.099-5.289 0.107-10.545-0.751-15.308-2.669z"-->
<!--              fill="#999999" p-id="2967"></path>-->
<!--      </svg>-->
<!--    </div>-->
<!--    <div class="container">-->
<!--      <svg class="line-container" width="400" height="400" viewBox="0 0 400 400">-->
<!--        <line class="line" x1="0" y1="50" x2="400" y2="50" fill="none" stroke-width="10" stroke="red"></line>-->
<!--      </svg>-->
<!--    </div>-->
<!--    <div class="container">-->
<!--      <svg width="200" height="200">-->
<!--        <rect x="0" y="0" width="100" height="50" fill="red">-->
<!--          <set attributeName="x" attributeType="XML" to="10" begin="1s"/>-->
<!--          <set attributeName="x" attributeType="XML" to="20" begin="2s"/>-->
<!--          <set attributeName="fill" attributeType="XML" to="blue" begin="3s"/>-->
<!--        </rect>-->
<!--      </svg>-->
<!--    </div>-->
<!--    <div class="container">-->
<!--      <svg width="200" height="200">-->
<!--        <circle r="30" cx="0" cy="0" fill="blue" stroke="black" stroke-width="1">-->
<!--          <animate attributeName="cx" attributeType="XML" from="0" to="100" dur="5s" repeatCount="2" fill="freeze"/>-->
<!--          <animate attributeName="cy" attributeType="XML" from="0" to="50" dur="5s" repeatCount="2" fill="freeze"/>-->
<!--          <animate attributeName="fill" attributeType="XML" from="blue" to="red" dur="5s" repeatCount="2"-->
<!--                   fill="freeze"/>-->
<!--          <animateTransform attributeName="transform" attributeType="XML" begin="0" dur="5s" type="scale" from="1"-->
<!--                            to="2" repeatCount="2" fill="freeze"/>-->
<!--        </circle>-->
<!--      </svg>-->
<!--    </div>-->
<!--    <div class="container">-->
<!--      <svg width="400" height="400">-->
<!--        <polygon points="30 30 70 30 90 70 10 70" fill="#fcc" stroke="black">-->
<!--          <animate attributeName="points" attributeType="XML" to="50 30 70 50 50 90 30 50" dur="5s" fill="freeze"-->
<!--                   repeatCount="1"/>-->
<!--        </polygon>-->
<!--      </svg>-->
<!--    </div>-->
<!--    <div class="container">-->
<!--      <svg width="200" height="200">-->
<!--        <rect x="0" y="0" width="10" height="10" fill="red">-->
<!--          <animateMotion-->
<!--              path="M10 10 L110 10 L110 110 L10 110 Z"-->
<!--              dur="5s"-->
<!--              rotate="0"-->
<!--              fill="freeze"-->
<!--              repeatCount="2"-->
<!--          />-->
<!--        </rect>-->
<!--        <path d="M10 10 L110 10 L110 110 L10 110 Z" fill="none" stroke="green"/>-->
<!--      </svg>-->
<!--    </div>-->
<!--    <div class="container">-->
<!--      <svg width="200" height="200">-->
<!--        <rect x="0" y="0" width="10" height="10" fill="red">-->
<!--          <animateMotion-->
<!--              id="forward-rect"-->
<!--              path="M10 10 L110 10 L110 110 L10 110"-->
<!--              dur="5s"-->
<!--              rotate="0"-->
<!--              fill="freeze"-->
<!--              begin="0;backward-rect.end+.5s"-->
<!--          />-->
<!--          <animateMotion-->
<!--              id="backward-rect"-->
<!--              path="M10 110 L110 110 L110 10 L10 10"-->
<!--              dur="5s"-->
<!--              rotate="0"-->
<!--              fill="freeze"-->
<!--              begin="forward-rect.end+.5s"-->
<!--          />-->
<!--          <animate-->
<!--              id="red-to-blue"-->
<!--              attributeName="fill"-->
<!--              attributeType="XML"-->
<!--              from="red"-->
<!--              to="blue"-->
<!--              dur="5s"-->
<!--              fill="freeze"-->
<!--              begin="0;blue-to-red.end+.5s"-->
<!--          />-->
<!--          <animate-->
<!--              id="blue-to-red"-->
<!--              attributeName="fill"-->
<!--              attributeType="XML"-->
<!--              from="blue"-->
<!--              to="red"-->
<!--              dur="5s"-->
<!--              fill="freeze"-->
<!--              begin="red-to-blue.end+.5s"-->
<!--          />-->
<!--        </rect>-->
<!--        <path d="M10 10 L110 10 L110 110 L10 110" fill="none" stroke="green"/>-->
<!--      </svg>-->
<!--    </div>-->
<!--    <div class="container">-->
<!--      <svg viewBox="0 0 200 200" width="200" height="200">-->
<!--        <g id="rect1">-->
<!--          <rect x="0" y="0" rx="0" ry="0" width="100" height="100" fill="red">-->
<!--            <animate-->
<!--                attributeType="XML"-->
<!--                attributeName="fill"-->
<!--                from="red"-->
<!--                to="green"-->
<!--                begin="rect1.click"-->
<!--                dur="2s"-->
<!--                fill="freeze"-->
<!--            />-->
<!--          </rect>-->
<!--        </g>-->
<!--        <animateTransform-->
<!--            attributeType="XML"-->
<!--            attributeName="transform"-->
<!--            type="translate"-->
<!--            from="0, 0"-->
<!--            to="50, 50"-->
<!--            begin="rect1.click"-->
<!--            dur="2s"-->
<!--            fill="freeze"-->
<!--        />-->
<!--        <rect x="0" y="100" width="100" height="100" fill="blue">-->
<!--          <animate-->
<!--              attributeType="XML"-->
<!--              attributeName="fill"-->
<!--              from="blue"-->
<!--              to="green"-->
<!--              begin="rect1.click"-->
<!--              dur="2s"-->
<!--              fill="freeze"-->
<!--          />-->
<!--        </rect>-->
<!--      </svg>-->
<!--    </div>-->
<!--    <div class="container bg-grey">-->
<!--      <svg width="400" height="400">-->
<!--        <defs>-->
<!--          <mask id="test-mask">-->
<!--            <rect x="5" y="5" width="390" height="390" fill="orange"></rect>-->
<!--            <circle r="50" cx="150" cy="150"></circle>-->
<!--          </mask>-->
<!--          <linearGradient id="test-linear-gradient">-->
<!--            <stop offset="0%" stop-color="red" stop-opacity="1"/>-->
<!--            <stop offset="50%" stop-color="green"/>-->
<!--            <stop offset="100%" stop-color="blue" stop-opacity="0.5"/>-->
<!--          </linearGradient>-->
<!--          <radialGradient-->
<!--              id="test-radial-gradient"-->
<!--              r="50%"-->
<!--              fx="50%"-->
<!--              fy="50%"-->
<!--              cx="50%"-->
<!--              cy="50%"-->
<!--          >-->
<!--            <stop offset="0%" stop-color="white" stop-opacity="1"/>-->
<!--            <stop offset="100%" stop-color="white" stop-opacity="0"/>-->
<!--          </radialGradient>-->
<!--        </defs>-->
<!--        &lt;!&ndash;        <rect x="5" y="5" width="390" height="390" fill="url(#test-radial-gradient)"></rect>&ndash;&gt;-->
<!--        <circle cx="200" cy="200" r="150" fill="url(#test-radial-gradient)"></circle>-->
<!--        &lt;!&ndash;        <rect x="5" y="5" width="390" height="390" fill="blue" mask="url(#test-mask)"></rect>&ndash;&gt;-->
<!--      </svg>-->
<!--    </div>-->
    <div class="container">
      <svg width="200" height="200" viewBox="0 0 1024 1024">
        <path
            class="rcb-logo"
            d="M227.11284 0h573.758755c123.119066 0 223.128405 100.009339 223.128405 223.128405v573.758755c0 123.119066-100.009339 223.128405-223.128405 223.128404H227.11284c-123.119066 0-223.128405-100.009339-223.128404-223.128404V223.128405C3.984436 100.009339 103.993774 0 227.11284 0z"
        ></path>
        <path
            class="rcb-logo"
            d="M374.536965 203.206226l-0.398444 88.852918-3.585992 2.390661-3.585992 2.390662-2.789105 1.992218-3.187549 1.992218-3.187548 2.789105-3.187549 2.390661-3.187549 2.390662-3.187548 2.390661-3.187549 2.390662-2.789105 2.390661-3.585992 3.187549-2.789105 2.789105-2.789105 2.789105-2.789105 2.789105-3.585993 2.789105-2.789105 2.789105-2.789105 3.187549-2.390661 2.789105-2.390662 3.187548-2.789105 2.789105-2.789105 3.187549-2.390661 3.187549-2.390662 3.187548-2.789105 3.187549-1.992218 3.187549-2.390661 3.187548-2.390662 3.187549-2.390661 3.187549-1.992218 3.585992-1.992218 3.585992-2.390661 3.585992-1.992218 3.187549-1.992218 3.585992-1.992218 3.585992-1.992218 3.585993-0.796887 3.585992-1.593774 3.585992-1.593775 3.585992-1.593774 3.984436-1.593774 3.585992-1.195331 3.585992-1.195331 3.984436-1.195331 3.984436-1.19533 3.984436-1.195331 3.984436-1.195331 3.984435-1.195331 3.984436-0.796887 3.984436-0.796887 3.984436-1.195331 3.984436-0.796887 3.984435-0.796887 3.984436-0.796887 3.984436-0.796887 3.984436-0.398444 4.382879-0.398443 3.984436-0.796888 4.382879-0.398443 3.984436-0.398444 4.38288-0.398443 3.984435-0.398444 3.984436v18.726848l0.398444 5.976654 0.398443 5.976654 0.398444 5.976653 0.796887 5.976654 0.796887 5.976654 0.796887 5.57821 1.195331 5.976654 1.195331 5.57821 1.19533 5.57821 1.593775 5.57821 1.195331 5.57821 1.593774 5.57821 1.992218 5.57821 1.992218 5.57821 1.992218 5.578211 1.992217 5.179766 2.390662 5.57821 2.390661 5.179767 2.390662 5.179766 2.789105 5.179767 2.789105 5.179766 2.789105 4.781323 2.789105 5.179767 2.789105 4.781323 3.187549 4.781323 3.187548 4.781323 1.593775 2.390661 1.593774 1.992218 1.992218 2.390662 1.593774 1.992218 1.593775 2.390661 1.593774 2.390661 1.593774 2.390662 1.992218 1.992218 1.992218 2.390661 1.593774 1.992218 1.992218 1.992218 1.992218 2.390662 1.992218 1.992218 1.992218 1.992217 1.992218 1.992218 2.390661 1.992218 1.992218 2.390662 1.992218 1.992218 1.992218 1.992217 1.992218 1.992218 2.390661 1.992218 1.992218 1.992218 2.390662 1.992218 1.992218 1.992218 2.390661 1.992218 1.992218 1.593774 2.390662 1.992218 2.390661 1.593774 1.992218 1.593775 2.390661 1.593774 2.390662 1.593774 2.390661 1.593775 4.781323 3.187548 4.781323 3.187549 4.781323 3.187549 4.781323 2.390661 5.179767 2.789105 5.179766 2.789105 5.179767 2.390662 5.179766 2.390661 5.179767 2.390662 5.179766 1.992218 5.578211 2.390661 5.57821 1.992218 5.57821 1.992218 5.57821 1.992218 5.976654 1.593774 5.57821 1.593774 5.57821 1.593775 5.976654 1.19533 5.976653 0.796888 5.976654 1.19533 5.976654 0.796887v-102.4h-73.313619l-1.593774-0.398443-1.593775-0.398444-1.19533-0.398443-1.195331-0.398444-1.195331-0.796887-1.593774-0.398444-1.195331-0.398443-1.195331-0.796887-1.593774-0.796887-1.195331-0.796888-1.195331-0.796887-1.19533-0.796887-0.796887-0.796887-1.195331-1.195331-0.796887-1.195331-0.796887-0.796887-0.796888-1.195331-0.796887-1.19533-0.796887-1.195331-0.796887-1.195331-0.796887-1.593774-0.398444-1.195331-0.796887-1.593774-0.398444-1.195331-0.398443-1.195331-0.398444-1.19533-0.398443-1.992218v-86.860701l0.398443-1.19533-2.390661-0.398444 0.398443-1.593774 0.398444-1.593775 0.796887-1.19533 0.398444-1.195331 0.796887-1.195331 0.796887-1.195331 0.796887-1.19533 0.796887-1.195331 0.796887-1.195331 0.796888-0.796887 0.796887-0.796887 1.195331-1.195331 0.796887-0.796887 1.19533-1.195331 1.195331-0.796887 1.195331-0.796887 1.593774-0.796887 1.195331-0.796887 1.195331-0.796887 1.593774-0.398444 1.195331-0.398444 1.195331-0.398443 1.19533-0.398444 1.593775-0.398443h224.323735l1.593774 0.398443 1.593775 0.398444 1.593774 0.398443 1.195331 0.398444 1.19533 0.398444 1.195331 0.796887 1.195331 0.796887 1.195331 0.796887 1.19533 0.796887 1.195331 0.796887 1.195331 1.195331 1.195331 0.796887 0.796887 1.195331 0.796887 0.796887 1.195331 0.796887 0.796887 1.195331 0.796887 1.195331 0.796887 1.19533 0.796887 1.195331 0.796887 1.195331 0.796888 1.195331 0.398443 1.19533 0.398444 1.593775 0.398443 1.593774 0.398444 1.593774 0.398443 1.195331 0.398444 1.195331v84.470039l-0.398444 1.195331-0.398443 1.992217-0.398444 1.195331-0.398443 1.195331-0.398444 1.195331-0.398443 1.593774-0.796888 1.195331-0.796887 1.593774-0.796887 1.195331-0.796887 1.19533-0.796887 1.195331-0.796887 1.195331-1.195331 0.796887-0.796887 1.195331-0.796887 1.195331-1.195331 0.796887-1.195331 0.796887-1.195331 0.796887-1.19533 0.796887-1.195331 0.796887-1.195331 0.796888-1.195331 0.398443-1.19533 0.398444-1.195331 0.796887-1.593774 0.398443-1.593775 0.398444-1.593774 0.398444-1.593774 0.398443h-72.516732v102.4l5.57821-0.796887 5.57821-1.195331 5.57821-0.796887 5.578211-1.195331 5.57821-1.593774 5.976653-1.593774 5.179767-1.593775 5.179766-1.593774 5.578211-1.992218 5.179766-1.992218 5.179767-2.390661 5.179766-1.992218 5.179767-2.390662 5.179766-2.390661 5.179767-2.390661 4.781323-2.390662 4.781323-2.789105 4.781323-2.390661 4.781323-2.789106 4.781323-2.789105 4.382879-3.187548 4.382879-3.187549 4.38288-3.187549 4.382879-3.585992 4.38288-3.585992 1.992217-1.593774 2.390662-1.593775 1.992218-1.992217 1.992218-1.992218 1.992218-1.992218 1.992217-1.992218 1.992218-1.992218 1.992218-1.992218 1.992218-1.992218 1.992218-1.992218 1.992218-1.992218 1.992218-1.992218 1.992218-1.992217 1.992218-1.992218 1.992218-1.992218 1.992217-1.992218 1.593775-1.992218 1.992218-2.390662 1.593774-1.992217 1.992218-1.992218 3.187549-4.38288 3.187548-4.382879 3.585992-4.382879 2.789105-4.38288 2.789106-4.382879 3.187548-4.781323 2.789105-4.781323 2.789105-4.781323 2.390662-4.781323 2.789105-4.781323 2.390661-5.179767 2.390662-5.179766 2.390661-5.179767 1.992218-5.179766 1.992218-5.179767 1.992218-5.179766 1.992218-5.57821 1.593774-5.57821 1.593774-5.179767 1.195331-5.57821 1.195331-5.57821 1.195331-5.57821 1.19533-5.57821 0.796888-5.578211 1.19533-5.57821 0.796887-5.57821 0.796888-5.57821 0.398443-5.976654 0.398444-5.57821h78.493385v3.984436l-0.398444 3.984436-0.398443 4.382879-0.398444 3.984436-0.398443 3.984436-0.796887 3.984436-0.398444 3.984435-0.796887 4.38288-0.796887 3.984436-0.796888 4.382879-0.796887 3.984436-0.796887 3.984436-0.796887 3.984435-0.796887 3.984436-0.796887 3.984436-0.796887 3.984436-0.796888 3.984436-0.796887 3.984435-1.195331 3.585993-0.796887 3.984435-1.19533 3.984436-1.195331 3.984436-1.195331 3.585992-1.195331 3.984436-1.19533 3.585992-1.593775 3.984436-1.19533 3.984436-1.195331 3.984436-1.593775 3.585992-1.593774 3.984436-1.593774 3.585992-1.593774 3.585992-1.593775 3.585992-1.593774 3.984436-1.992218 3.585992-1.992218 3.585992-1.593774 3.585993-1.992218 3.585992-1.992218 3.585992-1.992218 3.187549-1.992218 3.585992-1.992218 3.585992-2.390661 3.187549-2.390662 3.187548-1.992218 3.585993-2.390661 3.187548-2.390662 3.585993-2.390661 3.187548-2.390661 3.187549-2.390662 3.187548-2.390661 3.187549-2.390662 3.187549-2.390661 3.187548-2.789105 3.187549-2.789106 2.789105-2.390661 3.187549-2.789105 3.187548-2.789105 2.789105-2.789105 2.789105-2.789105 2.789106 0.398443 3.187548-2.789105 2.789105-2.789105 2.789105-2.789105 2.789105-2.789105 2.789105-3.187549 2.390662-2.789105 2.390661-2.789105 2.789105-2.789105 2.390662-3.187548 2.390661-3.187549 2.789105-2.789105 2.390662-3.984436 3.187549-3.187548 2.390661-3.187549 2.390662-3.187549 2.390661-3.187548 2.390661-3.187549 2.390662-3.187549 2.390661-3.585992 2.390662-3.585992 2.390661-3.187549 1.992218-3.585992 1.992218-3.585992 2.390662-3.585992 1.992218-3.585993 1.992217-3.585992 1.992218-3.585992 1.992218-3.585992 1.992218-3.585992 1.593774-3.585993 1.992218-3.585992 1.992218-3.585992 1.593775-3.984436 1.593774-3.585992 1.593774-3.585992 1.593775-3.585993 1.593774-3.984435 1.593774-3.984436 1.195331-3.984436 1.195331-3.585992 1.593774-3.984436 1.195331-3.984436 1.19533-3.984436 1.195331-3.984435 1.195331-3.984436 0.796887-3.984436 1.195331-3.984436 0.796887-3.984436 1.195331-3.984435 0.796887-3.984436 0.796887-4.38288 0.796887-3.984435 0.796887-3.984436 0.796888-3.984436 0.796887-4.382879 0.796887-3.984436 0.796887-4.382879 0.398444-3.984436 0.398443-4.38288 0.398444-4.382879 0.398443-4.382879 0.398444-3.984436 0.398443-4.38288 0.398444h-3.984435l-4.38288 0.398444h-26.297276l-4.382879-0.398444-4.38288-0.398444-3.984436-0.398443-4.382879-0.398444-4.382879-0.398443-4.38288-0.398444-4.382879-0.398443-4.382879-0.796888-4.38288-0.796887-3.984436-0.398443-4.382879-0.796887-4.382879-0.796888-3.984436-0.796887-4.38288-1.195331-3.984435-1.19533-3.984436-0.796887-4.38288-0.796888-3.984435-1.19533-3.984436-0.796887-3.984436-1.195331-3.984436-1.195331-3.984436-1.195331-3.984435-1.593774-3.984436-1.593774-3.984436-1.195331-3.984436-1.593774-3.585992-1.992218-3.984436-1.593775-3.585992-1.593774-3.984436-1.593774-3.585992-1.992218-3.585992-1.593774-3.585992-1.992218-3.585993-1.593775-3.585992-1.992218-3.585992-1.992217-3.585992-1.992218-3.585993-1.992218-3.585992-2.390662-3.187548-2.390661-3.585993-1.992218-3.585992-1.992218-3.187548-2.390662-3.585993-2.390661-3.585992-1.992218-3.187549-2.390661-3.187548-2.390662-3.585992-2.390661-3.187549-2.390662-3.187549-2.390661-3.187548-2.390662-3.187549-2.390661-3.187549-2.789105-3.187548-2.789105-2.789105-2.390662-3.187549-2.789105-2.789105-2.390661-2.789105-2.789105-2.789105-2.789106-2.789105-2.789105-3.187549-3.187548-2.789105-2.789105-2.789105-2.789105-2.789105-3.187549-2.789105-2.789105-2.789105-3.187549-2.789105-3.187548-2.789105-2.789105-2.789105-3.585993-2.390662-2.789105-2.390661-3.187548-2.390662-3.585992-2.789105-3.187549-2.390661-3.187549-2.390662-3.187548-2.390661-3.187549-2.390662-3.585992-2.390661-3.585992 0.398443-5.179767-2.390661-3.585992-1.992218-3.585992-1.992218-3.585993-2.390661-3.585992-1.992218-3.585992-1.992218-3.585992-1.992218-3.585993-1.992218-3.585992-1.593774-3.585992-1.593775-3.984436-1.593774-3.585992-1.593774-3.984436-1.593774-3.585992-1.593775-3.984436-1.593774-3.984436-1.593774-3.984435-1.593775-3.984436-1.19533-3.984436-1.195331-3.984436-1.195331-3.984436-1.195331-3.984435-1.19533-3.984436-1.195331-3.984436-1.195331-3.984436-1.195331-3.984436-0.796887-3.984435-0.796887-3.984436-0.796887-3.984436-0.796887-3.984436-0.796887-3.984436-0.796888-4.382879-0.796887-3.984436-1.593774-3.984436-0.796887-3.984435-0.796887-4.38288-0.796888-3.984436-0.398443-4.382879-0.398444-4.382879-0.398443-3.984436-0.398444-4.382879-0.398443-3.984436-0.398444-4.38288V499.249805l0.398444-6.375097 0.398443-6.375097 0.398444-5.976654 0.796887-5.976653 0.796887-6.375098 0.796887-6.375097 0.796887-5.976654 1.195331-5.976653 1.195331-5.976654 1.195331-6.375097 1.19533-5.976654 1.593775-5.976654 1.593774-5.976654 1.593774-5.57821 1.593775-5.976653 1.992217-5.57821 1.992218-5.578211 2.390662-5.57821 1.992218-5.976653 2.390661-5.57821 2.390662-5.578211 2.390661-5.57821 2.789105-5.57821 2.789105-5.57821 2.789105-5.179766 2.789105-5.179767 3.187549-5.57821 3.187549-4.781323 3.187548-5.179767 3.187549-5.179766 3.585992-4.781323 3.585992-4.781323 3.585993-4.781323 3.585992-4.781323 3.585992-4.781323 3.585992-4.382879 3.984436-4.781323 3.984436-4.38288 3.984436-4.382879 4.382879-4.382879 3.984436-3.984436 1.992218-2.390662 2.390661-1.992218 4.38288-3.984435 4.382879-4.38288 4.382879-3.984436 4.38288-3.984435 4.382879-3.585993 4.382879-3.984435 4.781323-3.585993 4.781323-3.984435 4.781323-3.187549 4.781323-3.585992 4.781323-3.585992 5.179767-3.187549 4.781323-3.187549 5.179766-2.789105 5.179767-3.187548 5.179766-2.789106 5.57821-2.789105 5.578211-2.789105 5.179766-2.390661L374.536965 203.206226z m123.51751 430.319066h31.875486v-75.70428h-31.875486v75.70428z m280.105836-135.869261l-0.398443-5.976654-0.796887-5.57821-0.796888-5.976653-0.796887-5.57821-0.796887-5.976654-0.796887-5.976654-1.195331-5.57821-1.195331-5.57821-1.19533-5.57821-1.195331-5.57821-1.593774-5.179767-1.593775-5.57821-1.992218-5.57821-1.992217-5.179767-1.992218-5.179766-2.390662-5.179767-2.390661-5.179766-2.390662-4.781323-2.390661-5.179767-2.789105-5.179766-2.789105-4.781323-2.789105-4.781323-2.789106-4.781323-2.789105-4.781323-3.187548-4.38288-3.187549-4.382879-3.187549-4.382879-3.585992-4.38288-1.593774-2.390661-1.593774-1.992218-1.992218-1.992218-1.992218-2.390661-1.593774-1.992218-1.992218-1.992218-1.992218-1.992218-1.992218-2.390662-1.593774-1.992217-1.992218-1.992218-1.992218-1.992218-1.992218-2.390662-1.992218-1.593774-1.992218-1.992218-1.992218-1.593774-2.390661-1.992218-1.992218-1.992218-2.390662-1.992218-1.992218-1.593774-2.390661-1.992218-1.992218-1.593775-1.992218-1.593774-4.382879-3.187548-4.38288-3.187549-4.382879-3.187549-4.781323-3.187548L657.431907 290.863813l-4.781323-2.789105-4.781323-3.187548-4.781323-2.789106-4.781323-2.789105-5.179767-2.789105-5.179766-2.390661-5.179767-2.390662-5.179766-2.390661-5.179767-1.992218-5.179766-1.992218-5.578211-1.992218-5.57821-1.992218-5.57821-1.593774-5.57821-1.195331-5.57821-1.593774-5.976654-1.195331-5.57821-1.195331-5.57821-1.19533-5.976654-0.796887-5.57821-0.796888v105.985993H627.150195l1.593774 0.398443 1.593774 0.398444 1.593775 0.398443 1.19533 0.398444 1.195331 0.398444 1.195331 0.796887 1.19533 0.796887 1.195331 0.796887 1.195331 0.796887 1.195331 0.796887 1.19533 0.796887 1.195331 1.195331 0.796887 1.195331 0.796887 0.796887 1.195331 1.195331 0.796887 1.195331 0.796888 1.19533 0.796887 1.195331 0.796887 1.593774 0.796887 1.195331 0.796887 1.195331 0.398444 1.195331 0.398443 1.593774 0.398444 1.593774 0.398443 1.593775 0.398444 1.19533 0.398444 1.593775V470.163424l-0.398444 1.593774-0.398444 1.593775-0.398443 1.593774-0.398444 1.195331-0.398443 1.195331-0.398444 1.593774-0.796887 1.195331v1.992218l-0.796887 1.19533-0.796887 0.796887-0.796887 1.195331-0.796888 1.195331-1.19533 1.195331-0.796888 1.19533-0.796887 1.195331-1.19533 0.796887-1.195331 0.796887-1.195331 0.796888-1.195331 0.796887-1.19533 0.796887-1.195331 0.796887-1.195331 0.796887-1.195331 0.398444-1.19533 0.398443-1.593775 0.398444-1.593774 0.398444-1.593774 0.398443-1.593775 0.398444H405.615564l-1.593774-0.398444-1.593774-0.398443-1.195331-0.398444-1.195331-0.398444-1.195331-0.398443-1.593774-0.398444-1.195331-0.796887-1.19533-0.796887-1.593775-0.796887-1.195331-0.796887-1.19533-0.796888-1.195331-0.796887-0.796887-0.796887-1.195331-1.195331-0.796887-1.19533-0.796887-1.195331-0.796887-1.195331-0.796888-1.195331-0.796887-0.796887-0.796887-1.19533-0.796887-1.593775-0.398444-1.195331-0.796887-1.593774-0.398443-1.195331-0.398444-1.19533-0.398443-1.593775-0.398444-1.593774V384.099611l0.398444-1.195331 0.398443-1.593774 0.398444-1.593774 0.398443-1.593775 0.796887-1.195331 0.398444-1.19533 0.796887-1.195331 0.796887-1.593774 0.796887-1.195331 0.796888-1.195331 0.796887-1.195331 0.796887-1.19533 0.796887-0.796887 1.195331-1.195331 0.796887-1.195331 1.195331-0.796887 1.19533-0.796887 1.195331-0.796887 1.593775-0.796888 1.19533-0.796887 1.195331-0.796887 1.593774-0.398443 1.195331-0.398444 1.195331-0.398444 1.195331-0.398443 1.593774-0.398444h70.922957V174.518288l5.179767-0.796887 5.179766-0.398444 5.179767-0.398443 5.179766-0.398444 5.57821-0.398444 4.781323-0.796887h27.492607l4.38288 0.398444 4.382879 0.398443 4.382879 0.398444 4.38288 0.398444 4.382879 0.398443 3.984436 0.398444 4.382879 0.398443 3.984436 0.796888 4.38288 0.796887 3.984435 0.796887 4.38288 0.796887 3.984436 0.796887 3.984435 0.796887 3.984436 0.796887 3.984436 1.195331 3.984436 1.195331 3.984436 0.796887 3.984435 0.796887 3.984436 1.195331 3.984436 1.195331 3.984436 1.19533 3.984435 1.195331 3.984436 1.195331 3.585993 1.195331 3.984435 1.19533 3.585993 1.195331 3.984435 1.593775 3.585993 1.593774 3.984435 1.195331 3.585993 1.593774 3.585992 1.992218 3.585992 1.593774 3.585992 1.992218 3.585992 1.593774 3.585993 1.992218 3.585992 1.992218 3.585992 1.992218 3.585992 1.593774 3.585993 1.992218 3.585992 1.992218 3.585992 2.390662 3.585992 1.593774 3.187549 2.390661 3.585992 2.390662 3.585992 1.992218 3.187549 2.390661 3.187549 2.390662 3.187548 2.390661 3.187549 1.992218 3.187548 2.390662 1.195331 2.789105 3.187549 2.390661 3.187548 2.390662 3.187549 2.789105 2.789105 2.390661 2.789105 2.390662 3.187549 2.789105 2.789105 2.789105 2.789105 2.789105 2.789105 2.789105 2.789105 2.789105 2.789105 2.789105 2.789105 2.789105 2.789105 2.789105 2.789105 3.187549 2.789105 2.789105 2.390662 2.789105 2.789105 3.187548 2.789105 2.789106 2.390661 3.187548 2.390662 3.187549 2.789105 2.789105 2.390661 3.585992 2.390662 3.187549 2.390661 3.187548 2.390662 3.187549 1.992218 3.187549 2.390661 3.187548 2.390662 3.187549 2.390661 3.585992 1.992218 3.187549 2.390662 3.585992 1.992218 3.187549 1.992217 3.187548 1.992218 3.585992 1.992218 3.585993 1.992218 3.585992 1.593774 3.585992 1.992218 3.585992 1.992218 3.585993 1.593775 3.585992 1.593774 3.585992 1.593774 3.984436 1.593774 3.585992 1.593775 3.984436 1.593774 3.585992 1.195331 3.984436 1.593774 3.585992 1.195331 3.984436 1.593774 3.585992 1.195331 3.984436 1.593774 3.984436 0.796887 3.984435 1.195331 3.984436 1.195331 3.984436 1.195331 3.585992 1.19533 3.984436 0.796888 3.984436 0.796887 4.382879 0.796887 3.984436 0.796887 4.382879 0.796887 3.984436 0.796887 4.38288 0.796888 3.984435 0.796887 4.38288 0.398443 3.984436 0.796887 3.984435 0.398444 3.984436 0.398444 4.38288 0.398443 4.382879 0.398444 4.382879 0.398443 4.38288 0.398444 3.984435v4.38288l-78.094942-1.195331zM498.054475 466.178988h31.875486V390.474708h-31.875486v75.70428z"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
import {onMounted} from 'vue'

export default {
  name: "SvgAnimation",
  setup() {
    onMounted(() => {
      const logo = document.getElementsByClassName('rcb-logo')[0]
      console.log(logo.getTotalLength())
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  svg {
    border: 1px solid #000;
  }
}

.rect {
  stroke-dasharray: 10 20 30;
}

.circle {
  animation: circle 5s linear infinite;
}

@keyframes circle {
  from {
    stroke-dasharray: 0 1257;
  }
  to {
    stroke-dasharray: 1257 0;
  }
}

.rect-process {
  animation: rect-process 5s linear infinite;
}

@keyframes rect-process {
  from {
    stroke-dasharray: 0 800;
  }
  to {
    stroke-dasharray: 800 0;
  }
}

.logo {
  fill: none;
  stroke: #333;
  stroke-width: 5;
  animation: logo 10s linear 1 forwards;
}

@keyframes logo {
  0% {
    fill: white;
    stroke: #333;
    stroke-dasharray: 7300;
    stroke-dashoffset: 7300;
  }
  50% {
    fill: white;
    stroke: #333;
    stroke-dasharray: 7300;
    stroke-dashoffset: 0;
  }
  75% {
    fill: green;
    stroke: white;
  }
  100% {
    fill: red;
    stroke: white;
  }
}

.line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset .5s ease-out;
}

.line-container {
  &:hover {
    .line {
      stroke-dashoffset: 0;
    }
  }
}

.bg-grey {
  background: #333333;
}
</style>
